<!DOCTYPE html>

<html>
<head>
<title>HTML5 WebSocket测试 {{$token}}</title>
</head>
<body>
	<div>
		<input type="button" value="start" onclick="start()" />
        <input id="content" type="text">
        <input type="button" value="发送" onclick="send()">
	</div>
    <div style="margin-top:30px">
        <input type="button" value="进入聊天" onclick="group_bind()">
{{--        <input type="button" value="拉取聊天记录">--}}
    </div>
    <input id="user_id" type="text"  value="0">
    <input id="client_id" type="text"  value="0">
	<div id="messages"></div>
	<script type="text/javascript">
        //8.129.238.209
		var webSocket = new WebSocket('ws://8.129.238.209:6680');
		var token = '{!! $token !!}';
		webSocket.onerror = function(event) {
			alert(event.data);
		};
		//与WebSocket建立连接
		webSocket.onopen = function(event) {
			document.getElementById('messages').innerHTML = '12342';
		};
		//处理服务器返回的信息
		webSocket.onmessage = function(event) {
			//console.log(event.data)
            data = JSON.parse(event.data);
            console.log(data);
            if (data.type == 'init') {
                document.getElementById('client_id').value = data.client_id;
            }
            if (data.data != undefined && data.data.type == 'login') {
                document.getElementById('user_id').value = data.data.user_id;
            }
		};
		function start() {
			//向服务器发送请求
			webSocket.send(JSON.stringify({"type": '2',"token":token, "role":"{{$role}}", "id": {{$friend['id']}}}));
		}

		function group_bind()
        {
            group_id = document.getElementById('group_id').value;
            client_id = document.getElementById('client_id').value;
            webSocket.send(JSON.stringify({
                "type": 10000,
                "token":token,
                "user_id":2,
                'client_id':client_id,
                "group_id":group_id,
            }));
            console.log();
        }

		function send() {
		    content = document.getElementById('content').value;
            user_id = {{$friend['id']}};
            client_id = document.getElementById('client_id').value;
		    console.log(content);
		    webSocket.send(JSON.stringify({
                "client_id":client_id,
                "type": 200,
                "token": token,
                "content": content,
                "user_id": user_id,
                "group_id": 4,
                'to_role':'{{$to_role}}',
		    }))
        }
</script>
</html>

